<%@page import="org.shop.entity.security.MyUserDetail"%>
<%@page import="org.shop.util.ObjUtil"%>
<%@page import="org.springframework.security.core.context.SecurityContextImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	
	SecurityContextImpl securityContextImpl = (SecurityContextImpl)request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
	MyUserDetail ud = null;
	Byte state = 1;
	if(ObjUtil.isNotNullAndEmpty(securityContextImpl)) {
    	ud = (MyUserDetail) securityContextImpl.getAuthentication().getPrincipal();
		state = ud.getState();
    }
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<title>二手列表</title>
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/swiper.min.css">
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<script src="<%=basePath%>assets/js/swiper.min.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<style>
.headIcon{
	position: absolute;
    top: 0;
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.3rem;
    display: inline-block;
    color: #FF3F25;
}
.leftInfo {
	left: 0;
}

.rightInfo {
	right: 0;
}
.rightInfo .fa-neuter{
	transform: rotate(-45deg);
}

.nav ul li {
	float: left;
	font-size: 0.3rem;
	height: 0.6rem;
	line-height: 0.6rem;
	width: 30%;
	margin: 0 10%;
	border-bottom: 0.02rem solid #fff;
	text-align: center;
	color: #000
}

.content_cont ul li {
	width: 94%;
	padding: 0 3%;
	border-bottom: 10px solid #f1f1f1
}

.shangjiaxinxi {
	width: 100%;
	padding: 3% 0
}

.shangjiatouxiang {
	width: 0.8rem;
	height: 0.8rem;
	overflow: hidden;
	border-radius: 50%;
	float: left;
	background-position: center center;
	background-size: 100%;
	background-repeat: no-repeat;
}

.shangjiatext {
	width: 84%;
	height: 0.6rem;
	float: right
}

.shangjiatext_dianpuming {
	font-size: 0.28rem;
	height: 0.3rem;
	line-height: 0.28rem;
	margin-top: 0.1rem;
}

.shangjiatext_gengxinshijian {
	font-size: 0.22rem;
	height: 0.3rem;
	line-height: 0.3rem;
	color: #CCCBCB;
	margin-top: 0.12rem;
}

.jiage {
	color: red;
	font-size: 0.32rem;
	height: 0.6rem;
	line-height: 0.6rem;
	float: right;
}


.shangpinxinxi {
	font-size: 0.22rem;
	line-height: 0.4rem;
	font-weight: bold;
	font-size: 14px;
	margin: 10px 0
}

.favorite {
	height: 0.5rem;
	line-height: 0.5rem;
	font-size: 0.3rem;
	padding-top: 0.2rem;
	border-top: 0.01rem solid #f1f1f1;
}

.favorite .float_l {
	width: 30%;
	font-size: 0.22rem;
}
.favorite .float_r {
	font-size: 0.22rem;
	color: #399FFF;
}

.favorite span img {
	width:16px;
	float: left;
	margin: 0.05rem;
}

.zhanshitupian {
	height: 1.8rem;
}

.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
/* 	width: 2rem !important; */
}

.swiper-slide img {
	width: 100%;
	height: 100%
}

body {
	padding-bottom: 1rem;
	padding-top: 1.6rem;
}
.used a .img{
    display: none;
}
.used a .img2{
    display: block;
}
.used a p{
    color: #FF3F25;
}
.aside2{
	display: none;	
}
.wantBuy-img{
	width: 100%;
    height: 3rem;
    background-size: 140%;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.aside2 ul li{
	width: 44%;
	float: left;
	border-bottom: none;
	padding: 0;
	margin-left: 4%;
	margin-top: 4%;
	border-radius: 0.1rem;
	background: #F3F3F3;
	overflow: hidden;
	padding-bottom: 0.1rem;
}
.aside2 .shangpinxinxi{
	width: 45%;
	white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0.4rem;
    float: left;
    margin-left: 0.1rem;
}
.aside2 .jiage{
	font-size: 0.22rem;
	line-height: 0.4rem;
	height: 0.4rem;
	margin: 10px 0;
	margin-right: 0.1rem;
}
.aside2 .favorite{
	height: auto;
	border-top: none;
	padding-top: 0;
	padding: 0 0.1rem;
}
.aside2 .shangjiatouxiang{
	width: 0.4rem;
	height: 0.4rem;
}
.aside2 .shangjiatext_dianpuming {
    font-size: 0.22rem;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-left: 0.1rem; 
    float: left;
    margin-top: 0;
    width: 50%;
    white-space: nowrap;
	overflow: hidden;
    text-overflow: ellipsis;
}
.aside2 .favorite .float_r{
	line-height: 0.4rem;
	height: 0.4rem;
}

.noSJ img {
	width: 50%;
	margin: 30% auto 10%;
	display: block
}

.noSJ h3 {
	width: 100%;
	font-size: 0.25rem;
	line-height: 0.6rem;
	font-weight: bold;
	text-align: center
}

.noSJ p {
	width: 100%;
	font-size: 0.24rem;
	line-height: 0.6rem;
	text-align: center
}

</style>

</head>
<body>
	<input id="basePath" type="hidden" value="<%=basePath%>">
	<div class="header">
		<a href="#" class="leftInfo headIcon" onclick="issue()">
			<i class="fa fa-pencil-square-o"></i>
		</a>
		最新二手 
		<span class="rightInfo headIcon" id="toTwoHandSearcher"><i class="fa fa-neuter"></i></span>
	</div>
	<div class="find_nav">
		<div class="find_nav_left">
			<div class="find_nav_list" id="pagenavi1">
				<ul>
					<li class="sell active"><a>出售</a></li>
					<li class="buy"><a>求购</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="aside1">
		<c:choose>
			<c:when test="${not empty usedGoodsList}">
				<div class="content_cont">
					<ul>
						<c:forEach items="${usedGoodsList}" var="item">
							<li>
								<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId=${item.goodsId}">
									<div class="shangjiaxinxi clearFirx">
										<c:choose>
											<c:when test="${not empty item.userPhoto}">
												<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${item.userPhoto});">
												</div>
											</c:when>
											<c:otherwise>
												<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>assets/css/aboutUs/logo.png);">
												</div>
											</c:otherwise>
										</c:choose>
										<div class="shangjiatext">
											<div style="float: left;">
												<p class="shangjiatext_dianpuming">${item.userName}</p>
												<p class="shangjiatext_gengxinshijian">
													<fmt:formatDate value='${item.updateDate}' pattern='yyyy-MM-dd HH:mm' />
												</p>
											</div>
											<div class="jiage">
												<p>
													<i style="font-size: 0.24rem;" class="fa fa-rmb"></i>  ${item.goodsPrice}
												</p>
											</div>
										</div>
									</div>
									<div class="zhanshi">
										<div class="zhanshitupian">
											<div class="swiper-container">
												<div class="swiper-wrapper">
													<c:forTokens items="${item.goodsImage}" delims=","
														var="imgPath">
														<div class="swiper-slide" style="margin-right: 5px">
															<img
																src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${imgPath}"
																alt="">
														</div>
													</c:forTokens>
												</div>
											</div>
											<script>
												var swiper = new Swiper(
														'.swiper-container', {
															slidesPerView : 3.5,
															spaceBetween : 5,
															pagination : {
																clickable : true,
															},
														});
											</script>
		
										</div>
									</div>
									<div class="shangpinxinxi">${item.goodsIntro}</div>
								</a>
								<div class="favorite clearFirx" style="color: #9e8686">
									<span class="float_r" id='liuyan'>留言 <i>${item.leaveMessageCount}</i></span>
									<c:choose>
										<c:when test="${item.isFavoritesd == 0}">
											<span class="float_l shoucang">
											<img src="<%=basePath%>assets/images/sc.png" alt=""><i>收藏</i></span>
										</c:when>
										<c:otherwise>
											<span class="float_l shoucang">
											<img src="<%=basePath%>assets/images/sc2.png" alt=""><i>已收藏</i></span>
										</c:otherwise>
									</c:choose>
									<input type="hidden" value="${item.goodsId}">
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>
			</c:when>
			<c:otherwise>
				<div class="noSJ">
					<img src="<%=basePath%>assets/images/bcz.png" alt="">
					<h3>还没有人发布过哦！</h3>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
	<div class="aside2 clearFirx">
		<c:choose>
			<c:when test="${not empty buyGoodsList}">
				<div class="content_cont">
					<ul>
						<c:forEach items="${buyGoodsList}" var="item">
							<li>
								<!-- 商品图 -->
								<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId=${item.goodsId}">
									<div class="wantBuy-zhanshi">
										<div class="wantBuy-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage=${item.goodsImage})"></div>
									</div>
								</a>
								<div class="clearFirx">
									<!-- 介绍 -->
									<div class="shangpinxinxi">${item.goodsIntro}</div>
									<!-- 价格 -->
									<div class="jiage">
										<p>
											<i class="fa fa-rmb"></i>
											${item.goodsPrice}
										</p>
									</div>
								</div>
								<!-- 头像/留言 -->
								<div class="favorite clearFirx" style="color: #9e8686">
									<c:choose>
										<c:when test="${not empty item.userPhoto}">
											<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${item.userPhoto});">
											</div>
										</c:when>
										<c:otherwise>
											<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>assets/css/aboutUs/logo.png);">
											</div>
										</c:otherwise>
									</c:choose>
									<p class="shangjiatext_dianpuming">${item.userName}</p>
									<span class="float_r" id='liuyan'>留言 <i>${item.leaveMessageCount}</i></span>
									<input type="hidden" value="${item.goodsId}">
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>
			</c:when>
			<c:otherwise>
				<div class="noSJ">
					<img src="<%=basePath%>assets/images/bcz.png" alt="">
					<h3>还没有人发布过哦！</h3>
				</div>
			</c:otherwise>
		</c:choose>
	</div>
	<script>
		$(function() {
			
		});
	</script>
	<%@ include file="footer.jsp"%>
</body>
<script>
	var goodsIdentifying = 2;
	$(function () {
		$('.sell a').css('color',"#FF3F25");
		$('.buy').click(function(){
			$('.aside1').hide();
			$('.aside2').show();
			$('.buy').addClass('active');
			$('.sell').removeClass('active');
			$('.buy a').css('color',"#FF3F25");
			$('.sell a').css('color',"");
			goodsIdentifying = 3;
		});
		$('.sell').click(function(){
			$('.aside2').hide();
			$('.aside1').show();
			$('.sell').addClass('active');
			$('.buy').removeClass('active');
			$('.sell a').css('color',"#FF3F25");
			$('.buy a').css('color',"");
			goodsIdentifying = 2;
		});
		$('.navPOS').find('li').each(function() {
			$(this).find('a img').height($(this).find('a img').width());
		});

		$('.shangpinxinxi').each(function(){
    		var text = $(this);
    		text.text(showText(text.text(), 50));
    	})
    	
    	var targetId = '${usedGoodsInfo.goodsId}';
		var favoriteType = 1;
    	
    	//收藏||取消收藏
		$('.shoucang').click(function () {
			
			if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
			
			if($(this).find('i').html() == "收藏"){
				$(this).find('img').attr('src','<%=basePath%>assets/images/sc2.png');
		        $(this).find('i').html('已收藏');
			}else{
				$(this).find('img').attr('src','<%=basePath%>assets/images/sc.png');
		        $(this).find('i').html('收藏');
			}
			
			var targetId = $(this).siblings('input').val();
			var favoriteType = 1;
			
	    	$.ajax({
		    	url: "<%=basePath%>app/focusAndCancelFocus",
		        type: 'post',
		        data: {"targetId":targetId,"favoriteType":favoriteType},
		        dataType: 'json',
		        success: function (data) {
		        	if(data.state==1){
		        		layer.open({
		    			    content: '收藏成功'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}else if(data.state==2){
		        		layer.open({
		    			    content: '取消收藏'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}else{
		        		layer.open({
		    			    content: '收藏出了点小意外,稍等~'
		    			    ,skin: 'msg'
		    			    ,time: 2 //2秒后自动关闭
		    			  });
		        	}
    	        },error:function (){
    	        	layer.open({
	    			    content: '收藏出了点小意外,稍等~'
	    			    ,skin: 'msg'
	    			    ,time: 2 //2秒后自动关闭
	    			  });
    	        }
			});
		});
		
		$('#ul').find('li').each(function(){
			$(this).find('a>img').height($(this).find('a>img').width())
		});
		
	    $('.shangjiaxinxi>img').height($('.shangjiaxinxi>img').width())
	    
	    //点击搜索
	    $("#toTwoHandSearcher").click(function () {
	    	window.location.href="<%=basePath%>app/searchTwoHand";
		});
	    
	});
	
	//出售
	var geting = false;//是否加载信息，默认为false
    var currentPage = 1;//当前页
    var pageSize = 5;//每页数据数
    
 	//求购
	var buyGeting = false;//是否加载信息，默认为false
    var buyCurrentPage = 1;//当前页
    var buyPageSize = 6;//每页数据数
    
    $(window).scroll(function () {
    	if(goodsIdentifying == 2){
    		if (geting) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
            	currentPage++;
                getData();
            }
    	}else{
    		if (buyGeting) {
                return;
            }
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
            	buyCurrentPage++;
            	getBuyData();
            }
    	}
        
    });
    function getData() {
    	geting = true;
    	$.ajax({
			url : "<%=basePath%>app/getUsedList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"currentPage" : currentPage,
				"pageSize" : pageSize,
				"goodsIdentifying":2
			},
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<li>'+
						'<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId='+item.goodsId+'">'+
							'<div class="shangjiaxinxi clearFirx">'+
								'<div class="shangjiatouxiang">'+
								'<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.userPhoto+');"></div>'+
								'</div>'+
								'<div class="shangjiatext">'+
									'<div style="float: left;">'+
										'<p class="shangjiatext_dianpuming">'+item.userName+'</p>'+
										'<p class="shangjiatext_gengxinshijian">'+
											item.updateDate+
										'</p>'+
									'</div>'+
									'<div class="jiage">'+
										'<p>'+
											'<span style="font-size: 0.24rem;">￥</span>'+item.goodsPrice+
										'</p>'+
									'</div>'+
								'</div>'+
							'</div>'+
							'<div class="zhanshi">'+
								'<div class="zhanshitupian">'+
									'<div class="swiper-container">'+
										'<div class="swiper-wrapper">';
											if(item.goodsImage != ""){
												var arr = item.goodsImage.split(",");
												for(var i=0;i<arr.length;i++){
													var goodsImage = arr[i];
													html+='<div class="swiper-slide" style="margin-right: 5px">'+
														'<img src="<%=basePath%>app/getGoodsPhotoByName?goodsImage='+arr[i]+'" alt="">'+
													'</div>';
												}
												
											}
										html+='</div>'+
									'</div>'+
								'</div>'+
							'</div>'+
							'<div class="shangpinxinxi">'+item.goodsIntro+'</div>'+
						'</a>'+
					'</li>';
					$(".aside1 ul").append(html);
					geting = false;
				})
			},
			error : function(data) {
				alert("网络错误");
			}
		})
		var swiper = new Swiper('.swiper-container', {
			slidesPerView : 3.5,
			spaceBetween : 5,
			pagination : {
				clickable : true,
			},
		});
    }
    
    function getBuyData() {
    	buyGeting = true;
    	$.ajax({
			url : "<%=basePath%>app/getUsedList",
			async:false,
			dataType : "json",
			type : "post",
			data : {
				"currentPage" : buyCurrentPage,
				"pageSize" : buyPageSize,
				"goodsIdentifying":3
			},
			success : function(data) {
				$.each(data, function (i, item) {
					var html = '<li>'+
						'<a href="<%=basePath%>app/getUsedGoodsInfo?goodsId='+item.goodsId+'">'+
							'<div class="wantBuy-zhanshi">'+
								'<div class="wantBuy-img" style="background-image: url(<%=basePath%>app/getGoodsPhotoByName?goodsImage='+item.goodsImage+')"></div>'+
							'</div>'+
						'</a>'+
						'<div class="clearFirx">'+
							'<div class="shangpinxinxi">'+item.goodsIntro+'</div>'+
							'<div class="jiage">'+
								'<p>'+
									'<i class="fa fa-rmb"></i>'+item.goodsPrice+
								'</p>'+
							'</div>'+
						'</div>'+
						'<div class="favorite clearFirx" style="color: #9e8686">'+
							'<div class="shangjiatouxiang" style="background-image: url(<%=basePath%>/app/getGoodsPhotoByName?goodsImage='+item.userPhoto+')">'+
							'</div>'+
							'<p class="shangjiatext_dianpuming">'+item.userName+'</p>'+
							'<span class="float_r" id="liuyan">留言 <i>'+item.leaveMessageCount+'</i></span>'+
							'<input type="hidden" value="'+item.goodsId+'">'+
						'</div>'+
					'</li>';
					$(".aside2 ul").append(html);
					geting = false;
				})
			},
			error : function(data) {
				alert("网络错误");
			}
		})
		var swiper = new Swiper('.swiper-container', {
			slidesPerView : 3.5,
			spaceBetween : 5,
			pagination : {
				clickable : true,
			},
		});
    }
    
	function showText(text, numSub){

	    if(text == null){
	
	        return "";
	    }
	    if(text.length > numSub){
	
	        return text.substring(0, numSub) + "...";
	    }
	    return text;
	}
	
	//发布
    function issue() {
   		if(<%=state%> == 2){
			layer.open({
		    	content: '发布功能被禁用，请联系管理员'
			    ,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
		  	});
   		}else{
   			window.location.href="<%=basePath%>jsp/app/issueUsedGoods.jsp";
   		}
	}
	
</script>
</html>